@extends('public.base')
@section('body')
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-card">

                <!-- 搜索区/按钮区 -->

                <div class="layui-form layui-card-header layuiadmin-card-header-auto layui-form-pane">
                    <form id="search_form" name="search_form" lay-filter="search-form">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label layui-hide-md">真实姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="truename" autocomplete="off" class="layui-input"
                                           placeholder="真实姓名,如:小五" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label layui-hide-md">手机号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="mobile" autocomplete="off" class="layui-input"
                                           placeholder="手机号,如:13400998080" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <button id="search_btn" class="layui-btn layui-btn-normal"><i
                                                class="layui-icon" lay-submit="">&#xe615;</i>搜索
                                    </button>

                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="layui-card-body">
                    <!-- 表格定义 -->
                    <table class="layui-table" id="main_table"  lay-filter="main_table"></table>
                    <!-- 操作按钮定义 -->

                </div>
            </div>

        </div>
    </div>
    <!-- 勿删，这里是显示帮助说明文，会调用系统菜单中的说明文档 -->
    <div id="page_tip"></div>
    <script src="{{ADMIN_PATH}}layui/layui/layui.js?{{time()}}"></script>
    <script src="{{ADMIN_PATH}}js/admin.common.js?{{time()}}"></script>
    <script>
        // ==========================  公共变量区  ===========================================
        var index_url = '{{url('admin/ordersys/customer/index')}}';

        var change_url = '{{url('admin/content/adv/change/status')}}';

        //表格id
        var main_table_id = 'main_table';
        //搜索区的表单form id
        var search_form_id = 'search_form';
        //初始化后的表格对象
        var main_table;

        // ==========================  全局函数区  ===========================================

        //默认函数，重载当前页面数据，1、页面初始化 2、配合搜索 3、配合post_data等操作的回调，如：编辑或删除完表格的记录后，刷新当前页面等
        function reload_data(param) {
            //搜索表格
            do_search_table(main_table, search_form_id, param);

        }

        // ==============================  业务处理  ==============================================
        layui.config({
            base: '{{ADMIN_PATH}}layui/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table'], function(){

            //========================================== layui引用区 ==========================================
            var $ = layui.$,
                table = layui.table
                , form = layui.form
                , element = layui.element
            ;

            // ==============================  业务区  =========================================
            //表格默认排序字段
            var table_sort = 'list_order';
            var table_order = 'asc';

            main_table = table.render({
                elem: '#' + main_table_id
                , url: index_url //异步数据接口
                , method: 'post' //接口http请求类型
                //, headers: {token: '123456'} //接口的请求头
                , limit: 10 //每页显示的条数
                , limits: 50//	每页条数的选择项
                , initSort: { //初始化时的排序,如果不设的话，将无法标记表头的排序状态
                    field: table_sort
                    , type: table_order
                }
                , where: {sort: table_sort, order: table_order}
                , loading: true //显示加载
                , text: '查询无数据' //空数据时的异常提示
                , page: true //开启分页
                , cols: [[
                    {title: 'ID', field: 'id', width: 65, sort: true}
                    , {title: '排序', field: 'list_order', width: 95, sort: true}
                    , {title: '姓名', field: 'truename', width: 130, sort: true}
                    , {title: '手机号', field: 'mobile', width: 130, sort: true}
                    , {title: '地址', field: 'mobile', width: 280, templet: function (d) {
                            return d.country_name+","+d.city_name+","+ d.region_name+","+d.receiver_addr;
                        }}
                    , {title: '余额', field: 'balance', width: 130, sort: true}
                    , {title: '消费总额', field: 'balance_total', width: 130, sort: true}
                    , {title: '生日', field: 'brithday', width: 130, sort: true,  templet: layui_table_time_tpl_3}
                    , {title: '积分', field: 'score', width: 130, sort: true}

                ]]
                , done: function (res, curr, count) {
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    if (res.status != 200) {
                        show_error(res.message);
                    }
                    if (count == 0) {
                        layer.msg('暂无相关数据');
                    }
                }
            });


            // ==============================  监听区  =========================================

            // 表格监听
            table.on('sort()', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                //console.log(obj.field); //当前排序的字段名
                //console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
                reload_data({sort: {sort: obj.field, order: obj.type}});
            });

            //表格中的所有的switch监听
            form.on('switch()', function (obj) {
                //当前表格行数据
                var json = JSON.parse(decodeURIComponent($(this).data('json')));

                var name = obj.elem.name;
                var value = obj.elem.checked === true ? 1 : 0;

                var o = {};
                //数据库更新的主键
                o['id'] = json.id;
                //获取当前点击的checkbox的input名称和值
                o[name] = value;

                console.log(o);
                layer.confirm('确定改变当前状态吗?', function (index) {
                    //提交数据，1、提交网址 2、提交数据 3、是否关闭本iframe窗口(在弹出iframe时使用)
                    post_data(change_url, o, ''
                        //正确返回时，执行
                        , function () {
                            //
                        }
                        //错误返回或其它错误时，执行
                        , function () {
                            obj.elem.checked = !obj.elem.checked;
                            //重新渲染
                            form.render();
                        });

                    //关闭自身提示框
                    layer.close(index);
                }, function (index) {
                    //按钮【按钮二】的回调
                    obj.elem.checked = !obj.elem.checked;
                    //重新渲染
                    form.render();
                });

            });

            //其他按钮监听
            $("#search_btn").on('click', function () {
                reload_data();
                return false;
            });

            //监听行单击事件（单击事件为：rowDouble）
            table.on('row(main_table)', function(obj){
                var data = obj.data;

                layer.alert(JSON.stringify(data), {
                    title: '当前行数据：'
                });
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.$("#username").val(data.truename);
                parent.$("#user_id").val(data.id);
                parent.layer.close(index); //再执行关闭
                //标注选中样式
                //obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            });

            //监听搜索表单提交
            form.on('submit(search-form)', function (data) {
                return false;
            });

            //========================================== 渲染区 ==========================================
            //表单重新渲染，请保存到最后一行
            //渲染表单
            form.render(null, 'search_form');
            //导航栏渲染
            element.render('breadcrumb', 'breadcrumb');
        });
    </script>
@stop
